<template>
	<view class="container">
		<u-navbar placeholder auto-back left-icon-color="#fff" @rightClick="save" bg-color="#033787">
			<view slot="center" class="navbar">{{$t('member.addr.manage')}}</view>
			<view slot="right" class="navbar-right">
				{{$t('c.save')}}
			</view>
		</u-navbar>
		<u-form :model="form" :rules="rules" ref="form" label-width="180" label-align="center">
			<u-form-item :label="$t('member.addr.name')" prop="name">
				<u-input v-model="form.name" type="text" :placeholder="$t('member.addr.name.placeholder')"
					border="none"></u-input>
			</u-form-item>
			<u-form-item :label="$t('member.addr.phone')" prop="phone">
				<u-input v-model="form.phone" type="text" :placeholder="$t('member.addr.phone.placeholder')"
					border="none"></u-input>
			</u-form-item>
			<u-form-item :label="$t('member.addr.area')" prop="area">
				<my-picker v-model="form.area" :option="areas" border="none" label-field="name" :placeholder="$t('member.addr.area.placeholder')"></my-picker>
			</u-form-item>
			<u-form-item :label="$t('member.addr.addr')" prop="addr">
				<u-input v-model="form.addr" type="textarea" row="2" :placeholder="$t('member.addr.addr.placeholder')"
					border="none"></u-input>
			</u-form-item>
			<u-form-item :label="$t('member.addr.default')" prop="default">
				<u-switch v-model="form.default" active-color="#033787" size="36"></u-switch>
			</u-form-item>
		</u-form>
	</view>
</template>

<script>
	import picker from '@/components/picker.vue'
	export default {
		components: {
			'my-picker': picker
		},
		data() {
			return {
				form: {
					phone: '',
					name: '',
					area: '',
					addr: '',
					default: 0
				},
				rules: {
					phone: {
						type: 'number',
						required: true,
						message: this.$t('member.addr.phone.placeholder')
					},
					name: {
						type: 'string',
						required: true,
						message: this.$t('member.addr.name.placeholder')
					},
					area: {
						type: 'number',
						required: true,
						message: this.$t('member.addr.area.placeholder')
					},
					addr: {
						type: 'string',
						required: true,
						message: this.$t('member.addr.addr.placeholder')
					}
				},
				areas: [{
						id: 1,
						name: '地区1'
					},
					{
						id: 2,
						name: '地区2'
					}
				],
				loading: false
			}
		},
		onShow(option) {
			if (option) {
				this.getInfo()
			}
		},
		methods: {
			getInfo() {

			},
			save() {
				this.$refs.form.validate().then(res => {
					uni.showLoading({
						title: this.$t('c.saveing')
					})
					setTimeout(() => {
						uni.hideLoading()
						uni.navigateBack()
					}, 1000)
				})
			},
		}
	}
</script>

<style lang="scss">
	.u-form-item {
		background-color: #fff;
		margin-bottom: 24rpx;
		padding: 18rpx 24rpx;
	}
</style>